
// ====点击登录====
function signIn(){
    // 获取登录元素
let denglu =document.querySelector('.fm-button')
    // 点击登录发生的事件
denglu.addEventListener('click',function(){
    nonNull()//非空验证
    validateLogon()//用户名和密码正确错误验证
})

}
signIn()



// =======验证用户名和密码=======
function validateLogon(){
    // 获取用户名的value
   const yhm = document.querySelector('.yhm')
   let userName = yhm.value
// 密码的value
   const mima = document.querySelector('.mima')
   let loginPassword = mima.value
  
//    获取localStorage存储的数据
    let obtain = localStorage.getItem('USERS') 
    // 把获取到localStorage数据转成对象
   let information = JSON.parse(obtain)
 
    // 遍历information

    const userTishi = document.querySelector('.yhmtishi') 
   const mimaTishi = document.querySelector('.mimatishi') 
 let asd =information.forEach(item=>{
   if(userName ==item.user && loginPassword == item.password){
    confirm('登录成功是否跳转')
    location.href = './ShoppingCart.html'
    }else if(userName != item.user){
    userTishi.innerHTML = '用户名不存在'
    userTishi.style.color = 'red'
    }else if(loginPassword != item.password){
        mimaTishi.innerHTML = '密码错误'
        mimaTishi.style.color = 'red'
    }
 })
    }
    // ===================验证用户名和密码结束=====================

    // 非空验证
    function nonNull(){
        // 获取用户名和密码的value
        const yhm = document.querySelector('.yhm')
        let userName = yhm.value
        const mima = document.querySelector('.mima')
        let loginPassword = mima.value
        
        if(userName == ''){
            alert('用户名不能为空!') 
        }else if(loginPassword == ''){
         alert('密码不能为空!')
        }

   
    }

    
// =========正则验证=========
function regularVerification(){
    // 获取元素
    const yhm = document.querySelector('.yhm')//用户名框
     const mima = document.querySelector('.mima')//密码框
  
  
   
 //  失去焦点验证
 // 用户名
   yhm.onblur = function(){
    const yhm = document.querySelector('.yhm')//获取用户名框
    let userName = yhm.value //用户名value
    const userTishi = document.querySelector('.yhmtishi')//提示框

    let reg=/^[a-zA-Z][a-zA-Z0-9]{6,10}$/;
       if(!(reg.test(userName))) {
        userTishi.innerHTML = '用户名格式错误'
       userTishi.style.color = 'red'  
       yhm.value = ''
        } else{
            userTishi.innerHTML = '输入正确'
            userTishi.style.color = 'green' 
        }     
    }

 //  失去焦点验证
 // 密码
   mima.onblur = function(){
    const mima = document.querySelector('.mima')//获取密码框
    let loginPassword = mima.value//密码value
    const mimaTishi = document.querySelector('.mimatishi') //密码提示框
    let reg=/^[a-zA-Z][a-zA-Z0-9]{6,10}$/;
        if(!(reg.test(loginPassword))) {
            mimaTishi.innerHTML = '密码格式错误'
            mimaTishi.style.color = 'red'
            mima.value = ''  
        } else{
            mimaTishi.innerHTML = '输入正确'
            mimaTishi.style.color = 'green' 
        }     
    }
}
regularVerification()// 用户名和密码正则格式验证
  // =========正则验证结束=========


  
